@use "sass:map";
@use '../../../design-system' as *;
@use '../../../components/automated-examples/lib/vars.module' as *;

$z-index-grid: 0;
$z-index-mouse-mask: 10000; // NOTE: Above .ag-dnd-ghost z-index of 9999
$z-index-debug-canvas: $z-index-mouse-mask + 10;
$z-index-debug-panel: $z-index-debug-canvas + 10;

:global(.automated-row-grouping-grid.ag-theme-quartz),
:global(.automated-row-grouping-grid.ag-theme-quartz-dark) {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: $z-index-grid;

    @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
        width: 200% !important;
        height: 450px !important;
        margin-bottom: calc(500px / -2 + $spacing-size-8);
        transform-origin: top left;
        transform: scale(0.5);
        overflow: hidden;
        pointer-events: none;
    }

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        height: 450px;
    }

    @media screen and (min-width: $breakpoint-automated-row-grouping-large) {
        height: 600px;
    }

    svg[class*='logo-mark'] {
        position: absolute;
        display: block;
        width: 64px * 2;
        height: 48px * 2;
        top: 51%;
        left: 50%;
        transform: translate(-60px, -48px) scale(1.5);
        z-index: 1;
    }
}

.sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: $spacing-size-12;

    h2 {
        margin-bottom: $spacing-size-4;
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-ultra-tight);

        @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
            font-size: var(--font-size-massive);
        }
    }

    p {
        max-width: 50em;

        @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
            font-size: var(--font-size-large);
        }
    }
}

.sectionFooter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $spacing-size-12;
    margin-top: $spacing-size-12;

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        margin-top: $spacing-size-12;
    }

    button:not([class^='ag-']) {
        margin-left: $spacing-size-2;
    }
}

.updateFrequencyOuter {
    text-align: center;

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        text-align: left;
    }
}

.exploreButtonOuter {
    display: none;

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        display: block;
    }

    > span:first-child {
        display: none;

        @media screen and (min-width: $breakpoint-site-header-large) {
            display: inline;
        }
    }
}

.mouseMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: $z-index-mouse-mask;
    pointer-events: none;

    // Start off hidden
    opacity: 0;

    :global(.mouse) {
        --mobile-mouse-scale: #{$mobile-grid-scale};

        position: absolute;
        top: $mouse-offset-top;
        left: $mouse-offset-left;

        @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
            top: calc(#{$mouse-offset-top} * var(--mobile-mouse-scale));
            left: calc(#{$mouse-offset-left} * var(--mobile-mouse-scale));
            width: calc(#{$mouse-base-width} * var(--mobile-mouse-scale));
            height: calc(#{$mouse-base-height} * var(--mobile-mouse-scale));
        }
    }

    :global(.highlight) {
        opacity: 0.15;
    }

    :global(.animate-click) {
        transform-origin: 50% calc(50% - 1px);
        opacity: 0;
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
        transform: scale(0.1);
    }

    :global(.animate .animate-click) {
        opacity: 0.3;
        transform: scale(1);
    }
}
